<template>
  <el-card shadow="never" class="rd-8 mb-8">
    <el-steps :active="2" finish-status="success" align-center class="mb-40">
      <el-step title="课程基本信息" />
      <el-step title="章节基本信息" />
      <el-step title="发布课程" />
    </el-steps>
    <div class="flex justify-center mb-20">
      <div class="mr-10"><img :src="courseInfo.coverUrl" width="300" /></div>
      <div>
        <h2>{{ courseInfo.title }}</h2>
        <div class="color-red">￥{{ courseInfo.price }}</div>
      </div>
    </div>
    <div class="flex justify-center mb-20">
      <el-button
        @click="$router.push(`/course/chapter/${route.params.courseId}`)"
      >
        上一步
      </el-button>
      <el-button type="primary" @click="handlePublish">发布</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {
  reqCourseAndDescriptionByCourseId,
  reqPublishCourse,
} from '@/api/course'
import { Course } from '@/api/course/type'

const route = useRoute()
const router = useRouter()
const initForm: Course = {
  courseId: undefined,
  teacherId: undefined,
  subjectId: undefined,
  subjectPid: undefined,
  title: '',
  price: 0,
  lessonNum: undefined,
  coverUrl: undefined,
  buyCount: undefined,
  viewCount: undefined,
  status: '0',
  delFlag: '0',
}
let courseInfo = ref<Course>({ ...initForm })

const getCourseAndDescriptionByCourseId = async (courseId: string) => {
  let { data } = await reqCourseAndDescriptionByCourseId(courseId)
  courseInfo.value = data
}

const handlePublish = async () => {
  await reqPublishCourse(route.params.courseId as string, '1')
  ElMessage.success('发布成功')
  router.push('/course')
}

onMounted(() => {
  if (route.params && route.params.courseId) {
    getCourseAndDescriptionByCourseId(route.params.courseId as string) //调用根据 id查询的方法
  }
})
</script>

<style scoped></style>
